<div class="continaer-fluid">
  <div class="row no-gutters">
    <div class="col-md-2 col-xl-2 sidebar left" id="left-bar">
      <div class="accordion" id="menuAccordion">
        <ng-container *ngFor="let menuGroup of menuGroups; let first = first;">
          <div class="card">
            <div class="card-header" id="menuGroup{{ menuGroup.name }}Header">
              <a [routerLink]="[ '/config', menuGroup.name ]"><a class="card-title collapsed {{ menuGroup.name | lowercase}}" data-toggle="collapse" href="#{{ menuGroup.name }}Group"
                aria-expanded="false" attr.aria-controls="{{ menuGroup.name }}Group"
                (click)="onMenuGroupClicked(menuGroup)">
                <span class="menu-icon {{ menuGroup.name | lowercase }}-icon"></span>
                {{ "CFG." + menuGroup.name + ".name" | translate }}
              </a></a>
              <a class="card-title collapsed {{ menuGroup.name | lowercase}} for-click" data-toggle="collapse" href="#{{ menuGroup.name }}Group"
                aria-expanded="false" attr.aria-controls="{{ menuGroup.name }}Group"
                (click)="onMenuGroupClicked(menuGroup)">
              </a>
            </div>
            <div class="card-collapse collapse" id="{{ menuGroup.name }}Group" role="tabpanel"
              attr.aria-labelledby="menuGroup{{ menuGroup.name }}Header" data-parent="#menuAccordion"
              attr.aria-expanded="true">
              <div class="card-body">
                <div class="card-block">
                  <ul class="list-group list-group-flush">
                    <ng-container *ngFor="let item of menuGroup.items; let isFirst=first">
                        <a class="menu-detail-item" [ngClass]="{'list-group-item': true, 'list-group-item-action': true, 'active': isSubMenuActive(item)}" (click)="onMenuItemClicked(item)" [routerLink]="[ '/config', menuGroup.name ]" [queryParams]="{menu:item}">{{ "CFG." + menuGroup.name + ".items." + item.toString() | translate }}</a>
                    </ng-container>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
    <div class="col-md-9 col-xl-10">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
